<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Example: Define a Chart&#x27;s Axes and Series</title>
    <link rel="stylesheet" href="http://yui.yahooapis.com/3.4.0pr3/build/cssgrids/grids-min.css">
    <link rel="stylesheet" href="../assets/css/main.css">
    <link rel="stylesheet" href="../assets/vendor/prettify/prettify-min.css">
    <script src="../../build/yui/yui-min.js"></script>
</head>
<body>

<div id="doc">
    <h1>Example: Define a Chart&#x27;s Axes and Series</h1>

    

    <div class="yui3-g">
        <div id="main" class="yui3-u">
            <div class="content"><style scoped>
#mychart {
    margin:10px 10px 10px 10px;
    width:90%;
    max-width: 800px;
    height:400px;
}
</style>
<div class="intro">
<p>This example shows how to explicitly define the axes and series for a <code>Chart</code>.</p>
</div>
<div class="example">
<div id="mychart"></div>
<script type="text/javascript">
(function() {
    YUI().use('charts', function (Y) 
    { 
        //dataProvider source
        var myDataValues = [ 
            {date:"1/1/2010", miscellaneous:2000, expenses:3700, revenue:2200}, 
            {date:"2/1/2010", miscellaneous:5000, expenses:9100, revenue:100}, 
            {date:"3/1/2010", miscellaneous:4000, expenses:1900, revenue:1500}, 
            {date:"4/1/2010", miscellaneous:3000, expenses:3900, revenue:2800}, 
            {date:"5/1/2010", miscellaneous:500, expenses:7000, revenue:2650},
            {date:"6/1/2010", miscellaneous:3000, expenses:4700, revenue:1200} 
        ];
        
        //Define our axes for the chart.
        var myAxes = {
            financials:{
                keys:["miscellaneous", "revenue", "expenses"],
                position:"right",
                type:"numeric",
                styles:{
                    majorTicks:{
                        display: "none"
                    }
                }
            },
            dateRange:{
                keys:["date"],
                position:"bottom",
                type:"category",
                styles:{
                    majorTicks:{
                        display: "none"
                    },
                    label: {
                        rotation:-45,
                        margin:{top:5}
                    }
                }
            }
        };
       
        //define the series 
        var seriesCollection = [
         {
                type:"column",
                xAxis:"dateRange",
                yAxis:"financials",
                xKey:"date",
                yKey:"miscellaneous",
                xDisplayName:"Date",
                yDisplayName:"Miscellaneous",
                styles: {
                    border: {
                        weight: 1,
                        color: "#58006e"
                    },
                    over: {
                        fill: {
                            alpha: 0.7
                        }
                    }
                }
            },
            {
                type:"column",
                xAxis:"dateRange",
                yAxis:"financials",
                xKey:"date",
                yKey:"expenses",
                yDisplayName:"Expenses",
                styles: {
                    marker:{
                        fill: {
                            color: "#e0ddd0" 
                        },
                        border: {
                            weight: 1,
                            color: "#cbc8ba"
                        },
                        over: {
                            fill: {
                                alpha: 0.7
                            }
                        }
                    }
                }
            },
            {
                type:"combo",
                xAxis:"dateRange",
                yAxis:"financials",
                xKey:"date",
                yKey:"revenue",
                xDisplayName:"Date",
                yDisplayName:"Deductions",
                    line: {
                        color: "#ff7200"
                    },
                marker: {
                    fill: {
                        color: "#ff9f3b"
                    },
                    border: {
                        color: "#ff7200",
                        weight: 1
                    },
                    over: {
                        width: 12,
                        height: 12
                    },
                    width:9,
                    height:9
                }
            }
        ];

        //instantiate the chart
        var myChart = new Y.Chart({
                            dataProvider:myDataValues, 
                            axes:myAxes, 
                            seriesCollection:seriesCollection, 
                            horizontalGridlines: true,
                            verticalGridlines: true,
                            render:"#mychart"
                        });
    });
})();
</script>

</div>
<h3>Defining the axes and series for a <code>Chart</code> instance</h3>

<p>As we have seen from previous examples, the <code>Chart</code> class allows you to create and customize multiple chart types with very little code. Sometimes you'll want more control 
over the <code>Chart</code>. Suppose you want to place your value axis on the right or you need different series types in the same chart. Charts allows you to explicitly define your series and axes objects. You can either declare
an axis or series directly or define them with an object literal and allow the <code>Chart</code> instance to build them for you. In this example, we are going to define our axes and series with
object literals. This will allow us to place our value axis on the right and build a chart with columns and lines.</p>

<pre class="code prettyprint">YUI().use(&#x27;charts&#x27;, function (Y) 
{ 
    &#x2F;&#x2F;dataProvider source
    var myDataValues = [ 
        {date:&quot;1&#x2F;1&#x2F;2010&quot;, miscellaneous:2000, expenses:3700, revenue:2200}, 
        {date:&quot;2&#x2F;1&#x2F;2010&quot;, miscellaneous:5000, expenses:9100, revenue:100}, 
        {date:&quot;3&#x2F;1&#x2F;2010&quot;, miscellaneous:4000, expenses:1900, revenue:1500}, 
        {date:&quot;4&#x2F;1&#x2F;2010&quot;, miscellaneous:3000, expenses:3900, revenue:2800}, 
        {date:&quot;5&#x2F;1&#x2F;2010&quot;, miscellaneous:500, expenses:7000, revenue:2650},
        {date:&quot;6&#x2F;1&#x2F;2010&quot;, miscellaneous:3000, expenses:4700, revenue:1200} 
    ];

    &#x2F;&#x2F;Define our axes for the chart.
    var myAxes = {
        financials:{
            keys:[&quot;miscellaneous&quot;, &quot;revenue&quot;, &quot;expenses&quot;],
            position:&quot;right&quot;,
            type:&quot;numeric&quot;,
            styles:{
                majorTicks:{
                    display: &quot;none&quot;
                }
            }
        },
        dateRange:{
            keys:[&quot;date&quot;],
            position:&quot;bottom&quot;,
            type:&quot;category&quot;,
            styles:{
                majorTicks:{
                    display: &quot;none&quot;
                },
                label: {
                    rotation:-45,
                    margin:{top:5}
                }
            }
        }
    };

    &#x2F;&#x2F;define the series 
    var seriesCollection = [
     {
            type:&quot;column&quot;,
            xAxis:&quot;dateRange&quot;,
            yAxis:&quot;financials&quot;,
            xKey:&quot;date&quot;,
            yKey:&quot;miscellaneous&quot;,
            xDisplayName:&quot;Date&quot;,
            yDisplayName:&quot;Miscellaneous&quot;,
            styles: {
                border: {
                    weight: 1,
                    color: &quot;#58006e&quot;
                },
                over: {
                    fill: {
                        alpha: 0.7
                    }
                }
            }
        },
        {
            type:&quot;column&quot;,
            xAxis:&quot;dateRange&quot;,
            yAxis:&quot;financials&quot;,
            xKey:&quot;date&quot;,
            yKey:&quot;expenses&quot;,
            yDisplayName:&quot;Expenses&quot;,
            styles: {
                marker:{
                    fill: {
                        color: &quot;#e0ddd0&quot; 
                    },
                    border: {
                        weight: 1,
                        color: &quot;#cbc8ba&quot;
                    },
                    over: {
                        fill: {
                            alpha: 0.7
                        }
                    }
                }
            }
        },
        {
            type:&quot;combo&quot;,
            xAxis:&quot;dateRange&quot;,
            yAxis:&quot;financials&quot;,
            xKey:&quot;date&quot;,
            yKey:&quot;revenue&quot;,
            xDisplayName:&quot;Date&quot;,
            yDisplayName:&quot;Deductions&quot;,
                line: {
                    color: &quot;#ff7200&quot;
                },
            marker: {
                fill: {
                    color: &quot;#ff9f3b&quot;
                },
                border: {
                    color: &quot;#ff7200&quot;,
                    weight: 1
                },
                over: {
                    width: 12,
                    height: 12
                },
                width:9,
                height:9
            }
        }
    ];
    
    &#x2F;&#x2F;instantiate the chart
    var myChart = new Y.Chart({
                        dataProvider:myDataValues, 
                        axes:myAxes, 
                        seriesCollection:seriesCollection, 
                        horizontalGridlines: true,
                        verticalGridlines: true,
                        render:&quot;#mychart&quot;
                    });
});</pre>

</div>
        </div>

        <div id="sidebar" class="yui3-u">
            

            
                <div class="sidebox">
                    <div class="hd">
                        <h2 class="no-toc">Examples</h2>
                    </div>

                    <div class="bd">
                        <ul class="examples">
                            
                                
                                    <li data-description="Shows how to use Charts to create a basic chart.">
                                        <a href="charts-simple.html">Basic Charts Implementation</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Shows how to create a chart with multiple series.">
                                        <a href="charts-multiseries.html">Chart with Multiple Series</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Shows how to create a column chart with multiple series.">
                                        <a href="charts-column.html">Specify Chart Type</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Shows how to create a column chart with a stacked numeric axis.">
                                        <a href="charts-stackedcolumn.html">Create Stacked Chart</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Shows how to create a chart with a time axis.">
                                        <a href="charts-timeaxis.html">Create a Chart with a Time Axis</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Shows how to add gridlines to a chart.">
                                        <a href="charts-gridlines.html">Add Gridlines to a Chart</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Shows how to create a chart with planar based events.">
                                        <a href="charts-stackedarea.html">Create a Stacked Area Chart with Planar Based Events</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Shows how to use a chart&#x27;s styles attribute to customize a chart.">
                                        <a href="charts-globalstyles.html">Customize a Chart</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Shows how to customize the default tooltip of a chart.">
                                        <a href="charts-customizedtooltip.html">Customize a Chart&#x27;s Tooltip</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Shows how to explicitly define the axes and series for a chart.">
                                        <a href="charts-objectstyles.html">Define a Chart&#x27;s Axes and Series</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Shows how to use charts to create a pie chart.">
                                        <a href="charts-pie.html">Pie Chart</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Shows how to create a chart with multiple value axes.">
                                        <a href="charts-dualaxes.html">Dual Axes Chart</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Shows how to access a chart instance&#x27;s value axis after the chart has rendered.">
                                        <a href="charts-axisupdate.html">Update Chart Axis</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Shows how to access a chart instance&#x27;s seriesCollection after the chart has rendered.">
                                        <a href="charts-seriesupdate.html">Update Chart Series</a>
                                    </li>
                                
                            
                        </ul>
                    </div>
                </div>
            

            
        </div>
    </div>
</div>

<script src="../assets/vendor/prettify/prettify-min.js"></script>
<script>prettyPrint();</script>

</body>
</html>
